<template>
  <div class="mymain">
    <el-container class="cbox">
      <el-aside width="200px" class="mymenu"> <Menu></Menu> </el-aside>
      <el-container>
        <el-header class="myhead">
          <Head></Head>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer class="myfoot">
          <Foot></Foot>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import { onMounted, computed } from "vue";
import { ajax } from "@/api";
import { useStore } from "vuex";
import Foot from "@/components/Foot.vue";
import Head from "@/components/Head.vue";
import Menu from "@/components/Menu.vue";
export default {
  components: {
    Foot,
    Head,
    Menu,
  },
  setup() {
    const store = useStore();
    const myInfo = computed(() => {
      return store.state.userInfo;
    });
    onMounted(async () => {
      // let { code, result } = await ajax.getuserinfo();
      store.dispatch("changeUserInfoac"); // 发送一个action
    });
    return {
      myInfo,
    };
  },
  mounted() {
    // this.changeUserInfoac();
  },
};
</script>


<style lang="scss" scoped>
.mymain {
  width: 100%;
  height: 100%;
  .cbox {
    width: 100%;
    height: 100%;
    .mymenu {
      height: 100%;
      overflow: auto;
      background: #bbd4ec;
    }
    .myfoot {
      background: #fff;
      border-top: 1px solid #999;
    }
    .myhead {
      background: #fff;
      border-bottom: 1px solid #999;
    }
  }
}
</style>
